<template>
	<view class="page_login">
		<!-- 头部logo -->
		<view class="head">
			<view class="head_bg">
				<view class="head_inner_bg">
					<image style="width: 55px;height: 65px;" :src="imgInfo.head" class="head_logo" />
				</view>
			</view>
		</view>
		<!-- 登录form -->
		<view class="user-form">
			<u-form :model="userForm" ref="userForm" :rules="formRules">
				<view class="u-form-item">
					<u-form-item left-icon="account" :left-icon-style="{color:'#47a9fb',fontSize:'40rpx'}"
						:border-bottom="false" prop="userName">
						<u-input v-model="userForm.userName" :border="false" :trim="true" />
					</u-form-item>
				</view>
				<view class="u-form-item">
					<u-form-item class="u-form-item" left-icon="lock"
						:left-icon-style="{color:'#47a9fb',fontSize:'40rpx'}" :border-bottom="false" prop="userPwd">
						<u-input v-model="userForm.userPwd" :border="false" :trim="true" type="password"
							:password-icon="true" />
					</u-form-item>
				</view>
			</u-form>
		</view>

		<!-- 登录提交 -->
		<view class="submit">
			<u-button type="primary" ripple="true" @click="login">登录</u-button>
		</view>
		<view class="opts">
			<text @tap="goReg" class="text">立即注册</text>
			<text @tap="findPwd" class="text">忘记密码?</text>
		</view>
		<view class="quick_login_line">
			<view class="line" />
			<text class="text">快速登录</text>
			<view class="line" />
		</view>
		<view class="quick_login_list">
			<image @tap="thirdLogin('qq')" class="item" :src="imgInfo.qq" />
			<image @tap="thirdLogin('wechat')" class="item" :src="imgInfo.wechat" />
			<image @tap="thirdLogin('weibo')" class="item" :src="imgInfo.weibo" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片模型
				imgInfo: {
					head: '/static/login/head.png',
					qq: '/static/login/qq.png',
					wechat: '/static/login/wechat.png',
					weibo: '/static/login/weibo.png'
				},
				// 用户表单
				userForm: {
					userName: "cooljiatao",
					userPwd: "lovetao51!!"
				},
				// 用户登录验证规则
				formRules: {
					userName: [{
						required: true,
						message: '请输入用户名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					userPwd: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.userForm.setRules(this.formRules);
		},
		methods: {
			login() {
				this.$refs.userForm.validate(async valid => {
					if (valid) {

						let userInfo = await this.$u.api.userLogin({
							username: this.userForm.userName,
							password: this.userForm.userPwd
						});

						this.$u.vuex('vuexUserInfo', userInfo);
						this.$u.vuex('vuexUserName', this.userForm.userName);
						this.$u.vuex('vuexUserPassword', this.userForm.userPwd);

						uni.navigateBack();
					}
				});
			},
			findPwd() {
				uni.navigateTo({
					url: '/pages/find-pwd/find-pwd'
				})
			},
			goReg() {
				uni.navigateTo({
					url: '/pages/reg/reg'
				})
			},
			thirdLogin(type) {
				console.log(type)
			}
		}
	}
</script>

<style>
	page {
		height: auto;
		min-height: 100%;
		background-color: #f5f6f8;
	}
</style>
<style lang="scss" scoped>
	$logo-padding: 60px;
	$form-border-color: rgba(214, 214, 214, 1);
	$text-color: #B6B6B6;

	.page_login {
		padding: 10px;
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: $logo-padding;
		padding-bottom: $logo-padding;

		.head_bg {
			border: 1px solid #fbecf1;
			border-radius: 50px;
			width: 100px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;

			.head_inner_bg {
				border-radius: 40px;
				width: 80px;
				height: 80px;
				display: flex;
				background-color: $custom-color-blue;
				align-items: flex-end;
				justify-content: center;
				overflow: hidden;
			}
		}
	}

	.user-form {
		margin: 0 40rpx;

		.u-form-item {
			border-bottom: 2rpx solid $u-type-info-disabled;
		}
	}


	.submit {
		margin: 50rpx 40rpx 30rpx 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		text-align: center;
		color: white;
	}

	.opts {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 40rpx;

		.text {
			font-size: 13px;
			color: $text-color;
		}
	}

	.quick_login_line {
		margin-top: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.line {
			height: 1px;
			width: 38%;
			background-color: rgba(211, 211, 213, 1);
		}

		.text {
			font-size: 13px;
			color: rgba(200, 200, 200, 1);
			margin: 2px;
		}
	}

	.quick_login_list {
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.item {
			width: 40px;
			height: 40px;
			margin: 20px;
		}
	}
</style>
